<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="whole-flex-center-between whole-top-handle">
                <div class="search-area">
                    <el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
                    <el-select size="small" v-model="orderExcelStatus" style="margin-right:5px" placeholder="选择订单状态">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-col :span="4" class="margin-r-5">
                        <el-input size="small" v-model="idValue" placeholder="输入查询的商户id" clearable></el-input>
                    </el-col>
                    <el-button size="small" @click="getList(1,size,orderExcelStatus,idValue)">查询</el-button>
                </div>
            </div>
            <div class="whole-flow-table-box">
                <el-table ref="myTable" :data="list" border stripe >
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="shrink-box">
                                <el-form-item label="订单ID">
                                    <span>{{ props.row.oreder_id }}</span>
                                </el-form-item>
                                <el-form-item label="商户名称">
                                    <span>{{ props.row.user_name }}</span>
                                </el-form-item>
                                <el-form-item label="代理商名称">
                                    <span>{{ props.row.agentName }}</span>
                                </el-form-item>
                                <el-form-item label="商户ID">
                                    <span>{{ props.row.user_id }}</span>
                                </el-form-item>
                                <el-form-item label="订单名称">
                                    <span>{{ props.row.body }}</span>
                                </el-form-item>
                                <el-form-item label="系统订单号">
                                    <span>{{ props.row.order_no }}</span>
                                </el-form-item>
                                <el-form-item label="外部订单号">
                                    <span>{{ props.row.external_order_no }}</span>
                                </el-form-item>
                                <el-form-item label="渠道订单号">
                                    <span>{{ props.row.channel_order_no }}</span>
                                </el-form-item>
                                <el-form-item label="支付类型">
                                    <span>{{ props.row.pay_type }}</span>
                                </el-form-item>
                                <el-form-item label="应付金额">
                                    <span>{{ props.row.total_amount }}</span>
                                </el-form-item>
                                <el-form-item label="优惠金额">
                                    <span>{{ props.row.discountable_amount }}</span>
                                </el-form-item>
                                <el-form-item label="支付金额">
                                    <span>{{ props.row.pay_amount }}</span>
                                </el-form-item>
                                <el-form-item label="优惠金额">
                                    <span>{{ props.row.pay_amount }}</span>
                                </el-form-item>
                                <el-form-item label="退款金额">
                                    <span>{{ props.row.refund_money }}</span>
                                </el-form-item>
                                <el-form-item label="订单状态">
                                    <span v-if="props.row.status === 0">待支付</span>
                                    <span v-else-if="props.row.status === 1">已支付</span>
                                    <span v-else-if="props.row.status === 2">已退款</span>
                                </el-form-item>
                                <el-form-item label="订单备注">
                                    <span>{{ props.row.note }}</span>
                                </el-form-item>
                                <el-form-item label="支付时间">
                                    <span>{{ props.row.pay_time }}</span>
                                </el-form-item>
                                <el-form-item label="添加时间">
                                    <span>{{ props.row.create_time }}</span>
                                </el-form-item>
                                <el-form-item label="更新时间">
                                    <span>{{ props.row.update_time }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column sortable align="center" prop="oreder_id" label="订单ID" width="100"></el-table-column>
                    <el-table-column align="center" prop="body" label="订单名称"></el-table-column>
                    <el-table-column align="center" prop="user_name" label="商户名称" ></el-table-column>
                    <el-table-column sortable align="center" prop="pay_type" label="支付类型" ></el-table-column>
                    <el-table-column align="center" prop="pay_amount" label="支付金额" ></el-table-column>
                    <el-table-column align="center" prop="status" label="订单状态" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.status === 0">未支付</span>
                            <span v-else-if="scope.row.status === 1">已支付</span>
                            <span v-else-if="scope.row.status === 2">已退款</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="aa(scope.row)" >按钮</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="whole-pagination">
                <el-pagination background layout="prev, pager, next" :page-size="size" :total="count" @current-change="currentPage"></el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0,
            size: 10,
            list: [],
            options: [
                {
                    value: 0,
                    label: "待支付",
                },
                {
                    value: 1,
                    label: "已支付",
                },
                {
                    value: 2,
                    label: "已退款",
                }
            ],
            orderExcelStatus: "",
            expands: [],
            idValue:''
        };
    },
    methods: {
        clearFilter() {
            this.$refs.myTable.clearFilter();
            this.getList(1, this.size);
            this.orderExcelStatus = "";
            this.idValue = "";
        },
        filterHandler(value, row, column) {
            const property = column["property"];
            return row[property] === value;
        },
        getRowKeys: function (row) {
            return row.orderID;
        },
        // 获取订单列表
        getList(page, size, status,userID) {
            let _this = this;
            this.$axios({
                url: "/admin/general/getUserOrder",
                data: {
                    offset: page,
                    limit: size === undefined ? this.size : size,
                    agentID:1,
                    status: status === undefined ? '' : status,
                    userID:userID === undefined ? '' : userID,
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.list = res.data.content.data;
                        _this.count = res.data.content.count;
                    } else {
                        _this.$message({
                            message: res.data.msg,
                            type: "warning",
                        });
                    }
                },
            });
        },
        currentPage(page) {
            let _this = this;
            let sta;
            if (_this.orderExcelStatus == undefined) {
                sta = 0;
            } else {
                sta = _this.orderExcelStatus;
            }
            _this.getList(page, _this.size, sta);
        },
    },
    created() {
        this.getList(1);
    },
};
</script>


<style scoped>
.shrink-box {
    width: 100%;
    font-size: 0;
}
.shrink-box >>> label {
    width: 100px;
    color: #99a9bf;
}
.shrink-box .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 33.333333%;
}
.title-center {
    width: 100%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: black;
    font-weight: 700;
}
.img-box {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
</style>
